<template>
    <!-- 滚动容器 -->
    <div class="scroll-container" ref="scrollContainer" @scroll.passive="handleScroll">
        <!-- 列表展示的数据 -->
         <div :style="{paddingTop:topBlankFill+'px',//上下空表占位
                      paddingBottom:bottomBlankFill+'px'
         }">
        <div v-for="(item,index) in showDataList" :key="index">
            <div class="new-left">
                <h3>{{ item.title }}</h3>
                <div>
                    <p>
                        <span>{{ item.reads }}</span>
                        <span>{{ item.from }}</span>
                    </p>
                    <h4>{{ item.date }}*******************************</h4>
                </div>
                <div></div>
            </div>
        </div>
        </div>
        <!-- 请求状态下显示的信息 -->
         <div class="msg">
            <h2>小二努力中,请耐心等待......</h2>
         </div>
    </div>
</template>

<script >

export default{

    data(){
        return{
          allDataList:[],
        //   数据请求状态
        isRequestStatus:true,
        // 记录单个数据的高度
        // oneHeight:80,
        // 最大容积,我这里应该是6
        maxContainSize:0,
        // 初始位置
        startIndex:0,
        // endIndex:endIndex(),
        // 滚动状态
        isScrollStatus:true,
        currentScrollTop:0,

        }
    },
    props:{
       oneHeight:{
        type:Number,
        default:()=>{
            return 20
        }
       },
       requestURL:{
        type:String
       },
       requestNum:{
        type:Number
       }
    },
    computed:{
      endIndex(){
        let endIndex=this.startIndex+this.maxContainSize
        if(!this.allDataList[endIndex]){
            endIndex=this.allDataList.length-1
        }
        return endIndex
      },
      //定义一个待显示的数据列表元素
      showDataList(){
        return this.allDataList.slice(this.startIndex,this.endIndex)
      },
    //   定义上空白高度
    topBlankFill(){
        return this.startIndex*this.oneHeight
    },
    // 定义下空白高度
    bottomBlankFill(){
        return  (this.allDataList.length-this.endIndex)*this.oneHeight
    }
    },
   async created(){
           let newslist=  await this.getMockData(50)  
           if(!newslist) return
           this.allDataList=newslist
    },
    mounted(){
        this.getContainSize();
        // this.handleScroll()
        window.addEventListener('scroll', this.handleScroll,true);
        
        
    },
 
    activated(){
        this.$nextTick(()=>{
            this.$refs.scrollContainer.scrollTop=this.currentScrollTop
        })
       
    },
    methods:{
        getMockData(args){
            this.isRequestStatus=true
            //    请求模拟的数据
       return this.$axios.get('http://localhost:4000/data?num='+args).then(res=>{
            console.log(res.data);
            // this.allDataList=res.data.list
            // this.isRequestStatus=false
            return res.data.list
            
        }).catch(err=>{
            console.log(err);
            return false
            
        })
        },
        // 计算容器的最大容积
        getContainSize(){
            // 理论上应该是这样获取，但是怎么获取不到，用下面的获取反而能获取到
            // this.maxContainSize=~~(this.$refs.scrollContainer.offsetHeight/this.oneHeight)+2
            this.maxContainSize=~~(window.screen.height/this.oneHeight)+2
        },

    
        // 监听滚动
       async handleScroll(){
        // 添加节流
        if(this.isRequestStatus){
            this.isScrollStatus=false;
            // 设置一个定时器，1s之后才进行下一次scroll事件
            let timeId=setTimeout(()=>{
                this.isScrollStatus=true,
                clearTimeout(timeId)
            },100)
        }
            // 获取卷上去的距离，这里没有使用scrollTop，
           const val= Math.ceil(-this.$refs.scrollContainer.getBoundingClientRect().top)
           this.startIndex=~~(val/this.oneHeight)
           this.currentScrollTop=val//保存当前距离顶部的位置
        //    再次请求网络数据
           if(this.startIndex+this.maxContainSize>this.allDataList.length-1){
               console.log('滚动了底部');
              let newslist=await this.getMockData(20)
              if(!newslist) return
              this.allDataList=[...this.allDataList,...newslist]
               
           }
           
           
           console.log(this.startIndex);
           
        }
        
    }

}
   

</script >

<style scoped>
.scroll-container{
    width: 100%;
    height: 100%;
    overflow-y: auto;
  }
</style>